<template>
    <el-container>
        <div style="padding:0 15px;display:flex;">
            <sc-select-filter :data="data" :selected-values="selectedValues" :label-width="80" @on-change="change"></sc-select-filter>
            <scFilterBar filterName="filterName" :options="options" @filterChange="changeBar" style="margin-top:15px;margin-right:150px">
				<template #default="{filterLength, openFilter}">
					<el-badge :value="filterLength" type="danger" :hidden="filterLength<=0">
						<el-button icon="el-icon-filter" @click="openFilter">高级查询</el-button>
					</el-badge>
				</template>
			</scFilterBar>
        </div>
        <el-header style="border-top:none">
            <div class="right-panel-search">
                <!-- <div class="search-input">模糊查询</div>
                <el-input v-model="search.keywords" placeholder="请输入关键词" clearable></el-input>
                <el-date-picker v-model="time" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :size="size"  />
                <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button> -->
                <el-button type="primary" icon="el-icon-plus" @click="add" v-auth="'faultReport.add'">新增</el-button>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" tableName="faultColumn" :apiObj="apiObj" :column="column" row-key="id" stripe :params="query" remoteSort remoteFilter border >
				<el-table-column fixed type="selection" width="50"></el-table-column>
                <el-table-column fixed type="index" label="序号" align="center" width="50"></el-table-column>
                <!-- 故障图片 -->
                <template #img="{row}">
                    <el-image class="img" :src="row.img" :preview-src-list="[row.img]" hide-on-click-modal :initial-index="4" fit="cover" preview-teleported="true" />
                </template>
                <!-- 紧急程度 -->
                <template #urgent_name="scope">
                    <el-tag v-if="scope.row.urgent_name=='特急'" type="danger">特急</el-tag>
                    <el-tag v-if="scope.row.urgent_name=='紧急'" type="warning">紧急</el-tag>
                    <el-tag v-if="scope.row.urgent_name=='普通'" type="success">普通</el-tag>
                    <el-tag v-if="scope.row.urgent_name=='一般'" type="primary">一般</el-tag>
                </template>
                <!-- 维修状态 -->
                <template #type="scope">
                    <el-tag v-if="scope.row.type==0" type="danger">待维修</el-tag>
                    <el-tag v-if="scope.row.type==1" type="danger">待验证</el-tag>
                    <el-tag v-if="scope.row.type==2" type="success">已验证</el-tag>
                </template>
                <!-- 审核状态 -->
                <template #check_status="scope">
                    <el-tag v-if="scope.row.check_status==0" type="primary">待审核</el-tag>
                    <el-tag v-if="scope.row.check_status==1" type="warning">审核中</el-tag>
                    <el-tag v-if="scope.row.check_status==2" type="success">审核通过</el-tag>
                    <el-tag v-if="scope.row.check_status==3" type="danger">审核不通过</el-tag>
                    <el-tag v-if="scope.row.check_status==4" type="info">撤销审核</el-tag>
                </template>
                <!-- 故障描述 -->
               <!-- <template #remark="scope">
                   <el-popover placement="top-start" :width="200" trigger="hover" :content="scope.row.remark">
                   <template #reference>
                       <el-button style="padding: 5px 0;" text class="m-2" v-if="scope.row.remark">{{scope.row.remark && scope.row.remark.substring(0, 15)}}</el-button>
                   </template>
                   </el-popover>
               </template> -->
                <el-table-column label="操作" fixed="right" align="center" width="100">
                    <template #default="scope">
                        <el-button-group style="display:flex;flex-direction: column;">
                            <el-button text type="primary" size="small" @click="examine(scope.row, scope.$index)" v-if="scope.row.is_check ==1" v-auth="'faultReport.examine'">审核</el-button>
                            <el-button text type="primary" size="small" @click="dispatch(scope.row, scope.$index)" v-if="scope.row.is_work==1 && scope.row.check_status==2 &&scope.row.type==0" v-auth="'faultReport.dispatch'">派工</el-button>
                            <el-button text type="primary" size="small" @click="receive(scope.row, scope.$index)" v-if="scope.row.check_status==2 && scope.row.type==0" v-auth="'faultReport.receive'">接单</el-button>
                            <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)" v-if="(scope.row.check_status==0 || scope.row.check_status==3) && scope.row.is_create==1" v-auth="'faultReport.edit'">编辑</el-button>
                            <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)" v-auth="'faultReport.show'">详情</el-button>
                            <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)" v-if="(scope.row.check_status==0 || scope.row.check_status==3) && scope.row.is_create==1">
                                <template #reference>
                                    <el-button text type="danger" size="small" v-auth="'faultReport.delete'">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </el-button-group>
                    </template>
                </el-table-column>
			</scTable>
            <!-- <scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter border>
                <el-table-column type="selection" width="50" align="center" fixed></el-table-column>
                <el-table-column type="index" label="序号" fixed align="center" width="50"></el-table-column>
                <el-table-column label="设备代码" prop="device_code" align="center" width="130" fixed></el-table-column>
                <el-table-column label="设备名称" prop="device_title" align="center" width="150" fixed></el-table-column>
                <el-table-column label="设备类别" prop="class_title" align="center" width="150" fixed></el-table-column>
                <el-table-column label="故障类别" prop="fault_title" align="center" width="100"></el-table-column>
                <el-table-column label="紧急程度" prop="urgent_name" align="center" width="100">
                    <template #default="scope">
                        <el-tag v-if="scope.row.urgent_name=='特急'" type="danger">特急</el-tag>
                        <el-tag v-if="scope.row.urgent_name=='紧急'" type="warning">紧急</el-tag>
                        <el-tag v-if="scope.row.urgent_name=='普通'" type="success">普通</el-tag>
                        <el-tag v-if="scope.row.urgent_name=='一般'" type="primary">一般</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="维修状态" prop="type" align="center" width="100">
                    <template #default="scope">
                        <el-tag v-if="scope.row.type==0" type="danger">待维修</el-tag>
                        <el-tag v-if="scope.row.type==1" type="warning">维修中</el-tag>
                        <el-tag v-if="scope.row.type==2" type="success">已完成</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="审核状态" prop="check_status" align="center" width="110">
                    <template #default="scope">
                        <el-tag v-if="scope.row.check_status==0" type="primary">待审核</el-tag>
                        <el-tag v-if="scope.row.check_status==1" type="warning">审核中</el-tag>
                        <el-tag v-if="scope.row.check_status==2" type="success">审核通过</el-tag>
                        <el-tag v-if="scope.row.check_status==3" type="danger">审核不通过</el-tag>
                        <el-tag v-if="scope.row.check_status==4" type="info">撤销审核</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="报修人" prop="admin_name" align="center" width="150"></el-table-column>
                <el-table-column label="报修时间" prop="create_time" align="center" width="150"></el-table-column>
                <el-table-column label="故障图片" align="center" width="150">
                    <template #default="scope">
                        <el-image class="img" :src="scope.row.img" :preview-src-list="scope.row.img" fit="cover" preview-teleported="true" />
                    </template>
                </el-table-column>
                <el-table-column label="故障描述" prop="remark" align="center" width="150">
                    <template #default="scope">
                        <el-popover
                            placement="top-start"
                            :width="200"
                            trigger="hover"
                            :content="scope.row.remark"
                        >
                        <template #reference>
                            <el-button style="padding: 5px 0;" text class="m-2">{{scope.row.remark.substring(0, 8)}}···</el-button>
                        </template>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="审核人" prop="check_admin_names" align="center" width="150"></el-table-column>
                <el-table-column label="审核时间" prop="check_time" align="center" width="150"></el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="100">
                    <template #default="scope">
                        <el-button-group style="display:flex;flex-direction: column;">
                            <el-button text type="primary" size="small" @click="examine(scope.row, scope.$index)" v-if="scope.row.is_check ==1" v-auth="'faultReport.examine'">审核</el-button>
                            <el-button text type="primary" size="small" @click="dispatch(scope.row, scope.$index)" v-if="scope.row.is_work==1 && scope.row.check_status==2 &&scope.row.type==0" v-auth="'faultReport.dispatch'">派工</el-button>
                            <el-button text type="primary" size="small" @click="receive(scope.row, scope.$index)" v-if="scope.row.check_status==2 && scope.row.type==0" v-auth="'faultReport.receive'">接单</el-button>
                            <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)" v-if="(scope.row.check_status==0 || scope.row.check_status==3) && scope.row.is_create==1" v-auth="'faultReport.edit'">编辑</el-button>
                            <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)" v-auth="'faultReport.show'">详情</el-button>
                            <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)" v-if="(scope.row.check_status==0 || scope.row.check_status==3) && scope.row.is_create==1">
                                <template #reference>
                                    <el-button text type="danger" size="small" v-auth="'faultReport.delete'">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable> -->
        </el-main>
    </el-container>
    <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false" draggable></save-dialog>
    <select-hum v-if="dialog.human" ref="humanDialog" @success="handleSuccess" @closed="dialog.human=false" draggable></select-hum>
    <examine v-if="dialog.examine" ref="examineDialog" @success="handleSuccess" @closed="dialog.examine=false" draggable></examine>
    <receive v-if="dialog.receive" ref="receiveDialog" @success="handleSuccess" @closed="dialog.receive=false" draggable></receive>
</template>

<script>
import Examine from './examine.vue';
import Receive from './receive.vue';
import saveDialog from './save'
import SelectHum from './selectHum';
export default {
	name: 'user',
    components: {
        saveDialog,SelectHum,Examine,
        Receive
    },
	data() {
		return {
			dialog: {
				save: false,
                human:false,
                examine:false,
                receive:false,
			},
			groupFilterText: '',
			group: [],
			apiObj: this.$API.device.Maintenance.lists,
            search: {
				keywords: null,
                position_id:null,
                class_id:null,
                title_keywords:null,
                type:null,
                urgent_id:null,
                check_status:null,
                admin_id:null,
                start_time:null,
                end_time:null,
                child:[],
            },
            time:"",
            position:[],
            type:[],
            humList:[],
            column:[
                {label: "设备代码",prop: "device_code",width: "150"},
                {label: "设备名称",prop: "device_title",width: "150"},
                {label: "设备类别",prop: "class_title",width: "150"},
                {label: "故障类别",prop: "fault_title",width: "150"},
                {label: "紧急程度",prop: "urgent_name",width: "150"},
                {label: "维修状态",prop: "type",width: "150"},
                {label: "审核状态",prop: "check_status",width: "150"},
                {label: "报修人",prop: "admin_name",width: "150"},
                {label: "报修时间",prop: "create_time",width: "150"},
                {label: "故障图片",prop: "img",width: "150"},
                {label: "故障描述",prop: "remark",width: "150"},
                {label: "审核人",prop: "check_admin_names",width: "150"},
                {label: "审核时间",prop: "check_time",width: "150"},
            ],
            data: [
                {
                    key:"urgent_id",
                    options: [
                        {label: "全部",value: ""},
                    ]
                },
                {
                    title: "维修状态",
                    key: "type",
                    options: [
                        {label: "全部",value: ""},
                        // {label: "待维修",value: "0"},
                        {label: "待验证",value: "1",},
                        {label: "已验证",value: "2",},
                    ]
                },
                {
                    title: "审核状态",
                    key: "check_status",
                    options: [
                        {label: "全部",value: ""},
                        {label: "待审核",value: "0",},
                        {label: "审核中",value: "1",},
                        {label: "审核通过",value: "2",},
                        {label: "审核不通过",value: "3",},
                        {label: "撤销审核",value: "4",},
                    ]
                },
            ],
            options: [
                {label: '模糊查询',value: 'keywords',type: 'text',selected: true,placeholder: '请输入关键词',operator: 'include',
                    operators: [
                            {label: '包含',value: 'include',},
                            {label: '不包含',value: 'notinclude',},
                        ]},
                {label: '设备名称',value: 'title_keywords',type: 'text',selected: true,placeholder: '请输入设备名称',operator: 'include',
                    operators: [
                            {label: '包含',value: 'include',},
                            {label: '不包含',value: 'notinclude',},
                        ]},
                {label: '维修状态',value: 'type',type: 'select',operator: '=',selected: true,placeholder: '请选择维修状态',
                    extend: {
                        data:[
                            // {label: "待维修",value: "0"},
                            {label: "待验证",value: "1"},
                            {label: "已验证",value: "2"},
                            ]
                        }
                    },
                {label: '审核状态',value: 'check_status',type: 'select',operator: '=',selected: true,placeholder: '请选择审核状态',
                    extend: {
                        data:[
                            {label: "待审核",value: "0"},
                            {label: "审核中",value: "1"},
                            {label: "审核通过",value: "2"},
                            {label: "审核不通过",value: "3"},
                            {label: "撤销审核",value: "4"},
                            ]
                        }
                    },
                {label: '报修时间',value: 'create_time',type: 'daterange',operator: 'include',
                    operators: [
                            {label: '包含',value: 'include',},
                            {label: '不包含',value: 'notinclude',},
                        ]
					},
                {label: '审核时间',value: 'check_time',type: 'daterange',operator: 'include',
                    operators: [
                            {label: '包含',value: 'include',},
                            {label: '不包含',value: 'notinclude',},
                        ]
                },
            ]
		}
	},
	watch: {
		groupFilterText(val) {
			this.$refs.group.filter(val);
		}
	},
	mounted() {
        this.getPosition()
        this.getType()
        this.getHum()
        this.getUrgent()
	},
	methods: {
        change(selected){
            this.search.type = selected.type,
            this.search.urgent_id = selected.urgent_id,
            this.search.check_status = selected.check_status,
            this.upsearch()
        },
        changeBar(data){
            this.search.child = data
            this.upsearch()
        },
        //添加
		add() {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('add')
			})
		},
		//编辑
		table_edit(row) {
            this.dialog.save = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.open("edit").setData(row);
            });
            // if(row.check_status==0 && row.is_create==1){
            // }else{
            //     this.$message.error("您无权限编辑");
            // }
		},
        examine(row){
            this.dialog.examine = true;
            this.$nextTick(() => {
                this.$refs.examineDialog.open("edit").setData(row);
            });
            // if(row.is_check==1){
            // }else{
            //     this.$message.error("您无权限审核");
            // }
        },
        dispatch(row) {
            this.dialog.human = true;
            this.$nextTick(() => {
                this.$refs.humanDialog.open("edit").setData(row);
            });
            // if(row.is_create==1 && row.check_status==2){
            // }else{
            //     this.$message.error("您无权限派工");
            // }
		},
        // 接单
        receive(row){
            this.dialog.receive = true;
                this.$nextTick(() => {
                    this.$refs.receiveDialog.open("edit").setData(row);
                });
        },
		//查看
		table_show(row) {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("show").setData(row);
			});
		},
		//删除
		async table_del(row, index) {
            if(row.check_status==0 && row.is_create==1){
                var reqData = { id: row.id };
                var res = await this.$API.device.Maintenance.delete.post(reqData);
                if (res.code == 1) {
                    //这里选择刷新整个表格 OR 插入/编辑现有表格数据
                    this.$refs.table.tableData.splice(index, 1);
                    this.$message.success("删除成功");
                } else {
                    this.$alert(res.message, "提示", { type: "error" });
                }
            }else{
                this.$message.error("您无权限删除");
            }
		},
        async table_cancel(row, index) {
			var reqData = { id: row.id };
			var res = await this.$API.device.Maintenance.cancel.post(reqData);
			if (res.code == 1) {
				//这里选择刷新整个表格 OR 插入/编辑现有表格数据
				this.$refs.table.tableData.splice(index, 1);
                this.$refs.table.refresh();
				this.$message.success("取消成功");
			} else {
				this.$alert(res.message, "提示", { type: "error" });
			}
		},
		//搜索
		upsearch() {
            if(this.time!=null){
                this.search.start_time = this.time[0]
                this.search.end_time = this.time[1]
            }else{
                this.search.start_time = ""
                this.search.end_time = ""
            }
			this.$refs.table.upData(this.search)
		},
        //本地更新数据
		handleSuccess(data, mode) {
			if (mode == "add") {
				this.$refs.table.refresh();
			} else if (mode == "edit") {
				this.$refs.table.refresh();
			}
		},
        // 设备位置
        async getPosition(){
            var res = await this.$API.all.getPosition.get({is_page:0});
            this.position = res.data
        },
        // 设备类别
        async getType(){
            var res = await this.$API.all.getDeviceClass.get({is_page:0});
            this.type = res.data
        },
        // 所有人员
        async getHum(){
            var res = await this.$API.all.getAdmin.get({is_page:0});
            this.humList = res.data
            let a = {label: '报修人',value: 'admin_name',type: 'select',operator: 'include',
                    operators: [
                            {label: '包含',value: 'include',},
                            {label: '不包含',value: 'notinclude',},
                        ],selected: true,placeholder: '请选择报修人',extend: {data:[]}}
            let b = {label: '审核人',value: 'check_admin_names',type: 'select',operator: 'include',
                    operators: [
                            {label: '包含',value: 'include',},
                        ],selected: true,placeholder: '请选择审核人',extend: {data:[]}}
            res.data.map(item=>{
                a.extend.data.push({
                    label:item.name,
                    value:item.id
                })
                b.extend.data.push({
                    label:item.name,
                    value:item.id
                })
            })
            this.options.push(a,b)
        },
        // 紧急程度
        async getUrgent(){
            var res = await this.$API.all.getUrgent.get({is_page:0});
            let a = {title: "紧急程度",key: "urgent_id",options: [{label: "全部",value: ""}]}
            let b = {label: '紧急程度',value: 'urgent_name',type: 'select',operator: '=',selected: true,placeholder: '请选择紧急程度',extend: {data:[]}}
            res.data.map(item=>{
                a.options.push({
                    label:item.title,
                    value:String(item.id),
                })
                b.extend.data.push({
                    label:item.title,
                    value:item.id
                })
            })
            this.data[0] = a
            this.options.push(b)
        },
	}
}
</script>

<style lang="scss">
</style>
